<template>
  <view>
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">选择客户上体验课</block>
    </cu-custom>

    <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
      <view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in taball" :key="index" @tap="tabSelect"
        :data-id="index">
        {{item.name}}
      </view>
    </scroll-view>

    <scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]"
      :scroll-with-animation="true" :enable-back-to-top="true" v-if="TabCur ==0 && list.length > 0">
      <block v-for="(item,index) in list" :key="index">
        <view :class="'indexItem-' + item.username" :id="'indexes-' + item.username" :data-index="item.username" @click="jump"
          :data-src='"/pagesA/trial_class/trial_details?id="+item.userId'>
          <view class="cu-list menu-avatar no-padding">
            <view class="cu-item">
              <view class="cu-avatar round lg margin-xs bg-gradual-green">
                <text class="avatar-text">
                  {{ item.nickName || item.username }}
                </text>
              </view>
              <view class="content">
                <view class="text-black">{{ item.nickName || item.username }}
                  <text style="background-color: #D1EDFF;margin-left: 15upx;color: #24AFF5;border-radius: 5upx;font-size: 22upx;padding: 0 10upx;">{{item.mark}}</text>
                  <text style="background-color: #D1EDFF;margin-left: 15upx;color: #24AFF5;border-radius: 5upx;font-size: 22upx;padding: 0 10upx;">{{item.label}}</text>
                </view>
                <view class="text-gray text-sm">
                  {{item.phone}}
                </view>
              </view>
            </view>
          </view>
        </view>
      </block>
      <button class="btn shadow">共 {{list.length}} 人</button>
    </scroll-view>

    <view v-if="list.length == 0" style="width: 100%;margin: 0 auto;">
      <image src="../../static/11.png" mode="widthFix" style="margin: 200upx auto;display: block;"></image>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        TabCur: 0, //默认选中项
        scrollLeft: 0,
        taball: [
          // {
          // 	name: '最近联系',
          // 	index: 0,
          // },
          {
            name: '全部客户',
            index: 1,
          },
        ],
        StatusBar: this.StatusBar,
        CustomBar: this.CustomBar,
        hidden: true,
        listCurID: '',
        list: [], // 全部用户
        listCur: '',
      };
    },
    onLoad() {

    },
    onReady() {
      let that = this;
      uni.getStorage({
        key: 'openid',
        success: (res) => {
          that.openid = res.data
          that.setajax()
        },
        fail: () => {}
      });
      // uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
      // 	that.boxTop = res.top
      // }).exec();
      // uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
      // 	that.barTop = res.top
      // }).exec()
    },
    methods: {
      async setajax() {
        let {
          data: {
            datas: {
              list
            }
          }
        } = await this.$myRuquest({
          url: "/coach/members/getCoachMembersList",
          data: {
            'coachId': uni.getStorageSync("openid"),
            level: 0,
          },
        })
        this.list = list
      },

      tabSelect(e) {
        this.TabCur = e.currentTarget.dataset.id;
        this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
      },

      //获取文字信息
      getCur(e) {
        this.hidden = false;
        this.listCur = this.list[e.target.id].name;
      },
      setCur(e) {
        this.hidden = true;
        this.listCur = this.listCur
      },
      //滑动选择Item
      tMove(e) {
        let y = e.touches[0].clientY,
          offsettop = this.boxTop,
          that = this;
        //判断选择区域,只有在选择区才会生效
        if (y > offsettop) {
          let num = parseInt((y - offsettop) / 20);
          this.listCur = that.list[num].name
        };
      },

      //触发全部开始选择
      tStart() {
        this.hidden = false
      },

      //触发结束选择
      tEnd() {
        this.hidden = true;
        this.listCurID = this.listCur
      },
      jump(e) {
        console.log(e.currentTarget.dataset.src)
        if (e.currentTarget.dataset.src == 'Not-yet-open') {
          uni.showModal({
            title: '提示',
            content: '功能即将开放',
            showCancel: false,
            confirmColor: "#DD524D",
            success() {
              return
            }
          })
        } else {
          uni.navigateTo({
            url: e.currentTarget.dataset.src
          });
        }
      },
      indexSelect(e) {
        let that = this;
        let barHeight = this.barHeight;
        let list = this.list;
        let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
        for (let i = 0; i < list.length; i++) {
          if (scrollY < i + 1) {
            that.listCur = list[i].name;
            that.movableY = i * 20
            return false
          }
        }
      }
    }
  }
</script>

<style>
  page {
    background-color: #fff;
  }

  .btn {
    position: fixed;
    bottom: 70upx;
    left: 50%;
    font-size: 28upx;
    background-color: #fff;
    transform: translate(-50%, 0%);
    border-radius: 50upx;
    box-shadow: 0px 6px 5px #888888;
  }

  button::after {
    border: none;
  }

  .indexes {
    position: relative;
  }

  .indexBar {
    position: fixed;
    right: 0px;
    bottom: 0px;
    padding: 20upx 20upx 20upx 60upx;
    display: flex;
    align-items: center;
  }

  .indexBar .indexBar-box {
    width: 40upx;
    height: auto;
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
    border-radius: 10upx;
  }

  .indexBar-item {
    flex: 1;
    width: 40upx;
    height: 40upx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24upx;
    color: #888;
  }

  movable-view.indexBar-item {
    width: 40upx;
    height: 40upx;
    z-index: 9;
    position: relative;
  }

  movable-view.indexBar-item::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 10upx;
    height: 20upx;
    width: 4upx;
    background-color: #f37b1d;
  }

  .indexToast {
    position: fixed;
    top: 0;
    right: 80upx;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 100upx;
    height: 100upx;
    border-radius: 10upx;
    margin: auto;
    color: #fff;
    line-height: 100upx;
    text-align: center;
    font-size: 48upx;
  }
</style>
